<template>
  <div class="playprogress">
    <!--  -->
    <div class="runway" @touchmove="moving" @touchend="moveEnd">
      <!-- 已播放的进度 -->
      <div class="played" :style="{width:progress*100 +'%'}">
        <div class="ball" @touchstart="movestart"></div>
      </div>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.PlayProgress {
  width: 100%;
  height: 65px;
  .runway {
    width: 100%;
    height: 15px;
    margin-top: 15px;
    background-color: #717171;
    .played {
      width: 0;
      height: 100%;
      position: relative;
      background: skyblue;
      .ball {
        position: absolute;
        right: 0;
        top: 6.25px;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: white;
      }
    }
  }
}
</style>

<script>
export default {
  props: {
    value: {
      default: 0
    }
  },
  data() {
    return {
      // 宽度/总长度
      //已播放时间/总时长
      progress: 0,
      flag: false
    };
  },
  watch: {
    value(newVal) {
      if (!this.flag) {
        //flag为true表示用户正在操作
        this.progress = newVal;
      }
    }
  },
  methods: {
    moveStart() {
      this.flag = true;
    },
    moving(event) {
      if (this.flag) {
        //手指偏移
        // console.log('movie',posX);
        let posX = event.changedTouches[0].clientX;
        //总长度
        let rw_total = event.currentTarget.clientWidth;
        let rw_left = event.currentTarget.offsetLeft;
        //百分比
        let pro = (posX - rw_left) / rw_total;
        //处理误差
        if (pro > 0.99) {
          pro = 0.98;
        } else if (pro < 0.01) {
          pro = 0;
        }
        this.progress = pro;
        //事件委托: event.target
        //监听节点本身:event.currentTarget
        console.log("moving", progress);
      }
    },
    moveEnd() {
      this.flag = false;
      //通知父组件
      this.$emit("changeProgess", this.progress);
    }
  }
};
</script>
